

<script setup>
// ＜script setup＞无法使用“src”属性，因为它的语法在组件外部不明确 script setup使用src="./index.js"会报错 推荐使用import的形式导入 例如import * as children from "./index.js";
// 命名空间组件必须用script setup语法糖，不加setup不显示
// import { child1, child2,child3 } from "./index";
import child4 from "./child4.vue";
import * as children from "./index.js";
import {ref,version,reactive} from 'vue'
const tens=ref("change")
console.log(children,children.ten.value,version);
//传入到 defineProps 和 defineEmits 的选项不能引用在 setup 作用域中声明的局部变量所以tens.value会报错,
//但是，它可以引用导入的绑定，因为它们也在模块作用域内，所以用children.ten.value不报错
// const emit = defineEmits([tens.value, children.ten.value])
const handleClick=()=>{
   console.log(45630);
  }
  const shgf=()=>{
   console.log(1230);
  }
  const lists=reactive({
    name:"ueytr",
    age:30,
    stes:[1,2,3]
  })
  const title=ref("ssdwqqa")
</script>
<template>
  <!-- <div>
    <child1 />
    <child2 />
    <child3 />
  </div> -->
  <div>
    {{ title }}
     <!-- <children.child1 :title="title" /> -->
     <!-- <children.child2 />
     <children.child3 /> -->
     <!-- 这里class和style会覆盖子组件根节点的class和style样式 -->
     <!-- <child4 class="stdg" style="border:1px solid skyblue" @click="handleClick" @shgf="shgf" v-bind="lists"/> -->
     <children.child5 :title="title" @parents="value=>title=value" />
  </div>
</template>

<style scoped>
.stdg{
  color:skyblue
}
</style>
<style>
/* 全局样式stdg会和组件中的stdg样式合并，相同部分样式组件中的会覆盖全局的 */
.stdg{
  color:green;
  font-size:20px
}
</style>

